<template>
  <el-row class="app-fill-width" style="overflow-y: auto;">
    <el-col class="px-3" :span="8">
      <div class="py-5 app-h-64px" style="color: #6d6d6d">
        今日数据
      </div>
      <div style="background: #e7e7e7">
        <div class="app-flex mb-5 pl-5 pb-8" style="background:#f8f8f8">
          <div class="app-col-6">
            <div class="py-5 item-title">
              发布答案数量
            </div>
            <div class="app-font-36 item-value">
              {{ answerCount }}
            </div>
          </div>
          <div class="app-col-6">
            <div class="py-5 item-title">
              交易金额数量
            </div>
            <div class="app-font-36 item-value">
              {{ balance }}
            </div>
          </div>
        </div>
        <div class="app-flex mb-5 pl-5 pb-8" style="background:#f8f8f8">
          <div class="app-col-6">
            <div class="py-5 item-title">
              新增用户数量
            </div>
            <div class="app-font-36 item-value">
              {{ newUserCount }}
            </div>
          </div>
          <div class="app-col-6">
            <div class="py-5 item-title">
              发布问题数量
            </div>
            <div class="app-font-36 item-value">
              {{ questionCount }}
            </div>
          </div>
        </div>
      </div>
    </el-col>
    <el-col class="px-3" :span="8">
      <div class="py-5 app-h-64px" style="color: #6d6d6d">
        今日数据
      </div>
      <div style="background: #e7e7e7">
        <div class="app-flex mb-5 pl-5 pb-8" style="background:#f8f8f8">
          <div class="app-col-6">
            <div class="py-5 item-title">
              发布答案数量
            </div>
            <div class="app-font-36 item-value">
              {{ answerCountWeek }}
            </div>
          </div>
          <div class="app-col-6">
            <div class="py-5 item-title">
              交易金额数量
            </div>
            <div class="app-font-36 item-value">
              {{ balanceWeek }}
            </div>
          </div>
        </div>
        <div class="app-flex mb-5 pl-5 pb-8" style="background:#f8f8f8">
          <div class="app-col-6">
            <div class="py-5 item-title">
              新增用户数量
            </div>
            <div class="app-font-36 item-value">
              {{ newUserCountWeek }}
            </div>
          </div>
          <div class="app-col-6">
            <div class="py-5 item-title">
              发布问题数量
            </div>
            <div class="app-font-36 item-value">
              {{ questionCountWeek }}
            </div>
          </div>
        </div>
      </div>
    </el-col>
    <el-col class="px-3" :span="8">
      <div class="py-5 app-h-64px" style="color: #6d6d6d">
        今日数据
      </div>
      <div style="background: #e7e7e7">
        <div class="app-flex mb-5 pl-5 pb-8" style="background:#f8f8f8">
          <div class="app-col-6">
            <div class="py-5 item-title">
              发布答案数量
            </div>
            <div class="app-font-36 item-value">
              {{ answerCountMonth }}
            </div>
          </div>
          <div class="app-col-6">
            <div class="py-5 item-title">
              交易金额数量
            </div>
            <div class="app-font-36 item-value">
              {{ balanceMonth }}
            </div>
          </div>
        </div>
        <div class="app-flex mb-5 pl-5 pb-8" style="background:#f8f8f8">
          <div class="app-col-6">
            <div class="py-5 item-title">
              新增用户数量
            </div>
            <div class="app-font-36 item-value">
              {{ newUserCountMonth }}
            </div>
          </div>
          <div class="app-col-6">
            <div class="py-5 item-title">
              发布问题数量
            </div>
            <div class="app-font-36 item-value">
              {{ questionCountMonth }}
            </div>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import { homeStatistics } from '@/api/user'
export default {
  data: () => ({
    time: null,
    answerCount: 0,
    balance: 0,
    newUserCount: 0,
    questionCount: 0,
    answerCountWeek: 0,
    balanceWeek: 0,
    newUserCountWeek: 0,
    questionCountWeek: 0,
    answerCountMonth: 0,
    balanceMonth: 0,
    newUserCountMonth: 0,
    questionCountMonth: 0
  }),
  mounted() {
    this.getOnedayData()
    this.getOneweekData()
    this.getOnemonthData()
  },
  methods: {
    getOnedayData() {
      homeStatistics({ type: 1 }).then(res => {
        if (res.code === 200) {
          this.answerCount = res.data.answerCount
          this.balance = res.data.balance
          this.newUserCount = res.data.newUserCount
          this.questionCount = res.data.questionCount
        }
      })
    },
    getOneweekData() {
      homeStatistics({ type: 2 }).then(res => {
        if (res.code === 200) {
          this.answerCountWeek = res.data.answerCount
          this.balanceWeek = res.data.balance
          this.newUserCountWeek = res.data.newUserCount
          this.questionCountWeek = res.data.questionCount
        }
      })
    },
    getOnemonthData() {
      homeStatistics({ type: 3 }).then(res => {
        if (res.code === 200) {
          this.answerCountMonth = res.data.answerCount
          this.balanceMonth = res.data.balance
          this.newUserCountMonth = res.data.newUserCount
          this.questionCountMonth = res.data.questionCount
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.item-title {
  color: #b7b7b7;
}

.item-value {
  color: #598883
}
</style>
